@import '../global/variables.css';

/* ensure styles order */
@import '../button/button.css';
@import '../link/link.css';

:root,
:host {
  --ring-selected-tab-color: var(--ring-text-color);
}

:global(.ring-ui-theme-dark) {
  --ring-selected-tab-color: var(--ring-text-color);
}

.tabs {
  --ring-tabs-line-shadow: inset 0 -1px 0 0;
  --ring-tabs-selected-line-shadow: inset 0 -2px 0 0;

  composes: font from '../global/global.css';
}

.titles {
  display: inline-block;

  margin-bottom: calc(var(--ring-unit) * 2);

  & > * + * {
    margin-left: calc(var(--ring-unit) * 3);
  }
}

.titles {
  box-shadow: var(--ring-tabs-line-shadow) var(--ring-line-color);
}

.title {
  composes: font from '../global/global.css';

  position: relative;

  display: inline-block;

  padding: 0;

  cursor: pointer;

  color: inherit;

  border: 0;
  border-radius: 0;
  background: none;

  line-height: calc(var(--ring-unit) * 4);

  &:hover,
  &:active {
    color: var(--ring-link-hover-color);
    outline-style: none;
    box-shadow: inset 0 -1px 0 0 var(--ring-link-hover-color);

    &.selected,
    &.collapsed {
      color: inherit;
      box-shadow: var(--ring-tabs-selected-line-shadow) var(--ring-text-color);
    }
  }

  &:focus-visible {
    color: var(--ring-main-color);
    box-shadow: var(--ring-tabs-selected-line-shadow) var(--ring-main-color);
  }

  &[disabled] {
    pointer-events: none;
  }
}

.title.titleLegacy {
  display: inline-flex;
  flex-direction: column;
}

.title[disabled] {
  color: var(--ring-disabled-color);
}

.selected {
  cursor: default;

  color: var(--ring-active-text-color);

  outline: none;
  box-shadow: var(--ring-tabs-selected-line-shadow) var(--ring-selected-tab-color);

  font-weight: var(--ring-font-weight-bold);
}

.visible {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: flex;
  visibility: hidden;
}

.hiddenBold {
  display: flex;
  visibility: hidden;
  overflow: hidden;

  height: 0;

  font-weight: var(--ring-font-weight-bold);
}

.hiddenRegular {
  display: flex;
  visibility: hidden;
  overflow: hidden;

  height: 0;

  font-weight: normal;
}

.tabCounter {
  padding-left: 8px;

  color: var(--ring-secondary-color);

  font-size: 12px;
  font-weight: normal;
  line-height: 19px; /* prevent jumps in Firefox */
}

.autoCollapseContainer {
  position: relative;
}

.autoCollapse {
  position: relative;

  display: inline-flex;
  visibility: hidden;
  overflow: hidden;

  max-width: 100%;
}

.autoCollapse .title {
  flex-shrink: 0;
}

.rendered.adjusted {
  visibility: visible;
  overflow: visible;
}

.measure {
  position: absolute;
  top: 0;
  left: 0;

  overflow: hidden;

  height: 0;
  margin: 0;

  pointer-events: none;

  opacity: 0;
}

.morePopup {
  display: flex;
  flex-direction: column;
}

.collapsed.collapsed {
  width: 100%;

  border-bottom: 0;
  box-shadow: none;

  line-height: calc(var(--ring-unit) * 3);

  &:hover {
    box-shadow: none;
  }
}

.collapsed.collapsed[disabled] {
  color: var(--ring-disabled-color);
}

.collapsed .visible,
.collapsed .hidden {
  text-align: left;
}

.morePopupBeforeEnd.morePopupBeforeEnd.morePopupBeforeEnd {
  padding: 0;
}

.morePopupBeforeEnd ~ div {
  display: none;
}
